import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

//vite 内部自动的配置了 sass less 的css 功能， 我们要做的就是 安装sass  和 sass-loader  npm i node-sass sass-loader sass

//console.log(process.env.NODE_ENV)
//我们封装 axios 的BaseUrl 可以使用 process.env.NODE_ENV == 'production'  来判断是什么环境

// https://vitejs.dev/config/
export default defineConfig(({command,mode})=>{
  //如果是 npm run dev  则command 的值是 serve   如果是npm run build  则command的值是 build    但是如果配置了 mode='XXXXX'  则前面所说的command 会失效


  return {
    //默认值也就是 public  , 它指明了打包前的 静态文件的位置， 我们放在 public文件夹中的文件，  打包的时候，它会原样拷贝到 dist 的目录中
    //publicDir:"public",

    //vite的缓存目录， 使用默认的就好了
    //cacheDir:"node_modules/.vite",

    //是否开启https
    //https:true,



    //base 是指线上打包时， 所用的文件目录，  比如这里 请求的url  是这样的  http://www.xxx.com/admin123/
    base:command==='serve'?"/":"/admin123/",
    //这是vite的插件配置
    plugins: [vue()],


    //配置别名，   此处的path 要使用 import 的方式来引入， 不能使用require 的方式  因为 package.json中的  "type": "module", 这个type: module, 是说要使用 es6的引入方式， require 是commonjs的方式
    resolve:{
      alias:{
        "@":path.resolve(__dirname,"./src"),
      }
    },

    server:{
      port:9090,    //本地服务的端口， vite 默认是 5173
      host:"localhost",   //也可以是 ip 地址或者  192.168.1.104 本机的ip
      open:true,     // npm run dev 之后自动打开浏览器
      proxy:{       //开发的时候配置反向代理
        "/api":{
          target:"https://www.xxx.com",  //目标地址的域名  如果是有端口的， 也可以 https://www.xxx.com:9501
          changeOrigin:true,      //设置访问目标允许跨域
          //此处的参数使用的 pathStr 是为了防止和 import path  分不清
          rewrite:(pathStr)=>pathStr.replace(/^\/api/,"\/api")  //这里会把 http://localhost/api的请求， 转发到 https://www.xxx.com/api的请求上去
        },
        //如果有多个代理可以写多个
        '/prod-api': {
          target: "https://xxxx.com/",
          changeOrigin: true,///设置访问目标地址允许跨域
          rewrite: (p) => p.replace(/^\/prod-api/, '')
        }

      }
    },



    build:{
      //这里是打包时静态文件存放的文件夹名称
      assetsDir: 'assets123',

      //打包输出的目录
      //outDir:"dist",  默认就是 dist

      //会打包出 css js 等文件夹 目录显得清晰  这个选项会和 assetsDir 相冲突， 只选一个, 如果一定要的话， 在 output.chunkFileName:"assets123/js/[name]-[hash].js"
      // rollupOptions: {
      //   output: {
            //解决 和 assetsDir相冲突的办法
      //     chunkFileNames: 'assets123/js/[name]-[hash].js',
      //     entryFileNames: 'assets123/js/[name]-[hash].js',
      //     assetFileNames: 'assets123/[ext]/[name]-[hash].[ext]'

      //---------------------------------------------------------------
      //     chunkFileNames: 'js/[name]-[hash].js',
      //     entryFileNames: 'js/[name]-[hash].js',
      //     assetFileNames: '[ext]/[name]-[hash].[ext]'
      //   }
      // }
    },
  }



})


